<template>
  <div class="all">
    <div class="class">
      <div class="class-header">
        <div class="header-left">
          <div class="line"></div>
          <div class="title">项目详情</div>
        </div>
        <div class="header-right">
          <img src="../../assets/images/back.png" class="addmsg1" @click="getback">
          <el-dropdown trigger="hover" v-if="parentLeaderId == User.userId || User.roleId == '1' || User.roleId == '2'">
            <img src="../../assets/images/加号.png" class="addmsg" alt="" />
            <template #dropdown>
              <el-dropdown-menu>
                <!-- 添加子项目选项 -->
                <el-dropdown-item @click="handleAddSubProject">添加子项目</el-dropdown-item>
                <!-- 添加项目成员选项 -->
                <el-dropdown-item @click="handleAddProjectMember">添加项目成员</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="member">
      <div class="member-title">
        <div class="line"></div>
        <div class="title">项目组成员</div>
      </div>
      <div class="people" style="max-height: 116px; overflow-y: auto">
        <div class="member-row" v-for="(memberGroup, index) in groupMembers" :key="index">
          <div class="member-item" v-for="(member, innerIndex) in memberGroup" :key="innerIndex">
            <span>{{ member.userName }}</span>
            <span>{{ member.tel }}</span>
            <span :style="{ color: member.status === '空闲' ? 'green' : 'red' }">{{
              member.status
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="class-content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column  label="编号" align="center" >
          <template #default="scoped">
            {{ (currentPage - 1) * pageSize + scoped.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="子项目名称" align="center" />
        <el-table-column prop="leader" label="负责人" align="center" />
        <el-table-column prop="taskDay" label="工时(天)" align="center" />
        <el-table-column prop="beginTime" label="开始时间" align="center" />
        <el-table-column prop="endTime" label="结束时间" align="center" />
        <el-table-column label="项目进度(%)" align="center">
          <template #default="scoped">
            <el-progress type="circle" :percentage="scoped.row.progress" :width="60" />
          </template>
        </el-table-column>
          <el-table-column label="占比重(%)" align="center">
          <template #default="scoped">
            <el-progress type="circle" :percentage="scoped.row.proportion" :width="60" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160">
          <template #default="scoped">
            <el-button link type="success" @click="() => handleModity(scoped.row)"  
               :disabled="!(User.roleId == '1' || User.roleId == '2' || User.userId == scoped.row.leaderId || User.userId == parentLeaderId)"
              >修改</el-button>
              <el-button link type="danger" @click="() => handleDel(scoped.row)"  
                :disabled="!(User.roleId == '1' || User.roleId == '2' || User.userId == scoped.row.leaderId || User.userId == parentLeaderId)"
              >删除</el-button>
            <el-button link type="primary" @click="() => handleDetails(scoped.row)"  
               :disabled="disabledMap.get(scoped.row.projectId) || false"
              >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentPageChange"
        />
        <div> 
            每页
            <el-input-number
              v-model="pageSize"
              :min="1"
              :max="30"
              controls-position="right"
              @change="handleChange"
            />条
      </div>

      </div>
    </div>

    <!-- 添加子项目 -->
    <el-dialog v-model="dialogVisible" title="添加子项目" width="400px" :show-close="false">
      <el-form
        :model="formData"
        :rules="rules"
        ref="formRef"
        label-width="100px"
        hide-required-asterisk
      >
        <el-row>
          <el-form-item label="子项目名称" prop="projectName">
            <el-input v-model="formData.projectName" placeholder="请输入项目名称" />
          </el-form-item>
          <el-form-item label="负责人" prop="leaderId">
            <el-select
              v-model="formData.leaderId"
              placeholder="请选择负责人"
              @change="leaderChange"
            >
              <el-option
                v-for="(member, index) in groupMembersArr"
                :key="index"
                :label="member.userName"
                :value="member.userId"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="开始时间" prop="beginTime">
            <el-date-picker
              v-model="formData.beginTime"
              type="date"
              placeholder="请选择开始时间"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              v-model="formData.endTime"
              type="date"
              placeholder="请选择结束时间"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="项目工期" prop="taskDay">
            <el-input v-model="formData.taskDay" placeholder="请输入项目工期" />
          </el-form-item>
          <el-form-item label="项目比重" prop="proportion">
            <el-input
              v-model="formData.proportion"
              style="width: 200px"
              placeholder="请输入项目比重"
            >
              <template #suffix>%</template>
            </el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" class="confirm">确认</el-button>
      </template>
    </el-dialog>
    <!-- 添加项目成员模态框 -->
    <el-dialog
      v-model="addMemberDialogVisible"
      title="添加项目成员"
      width="400px"
      :show-close="false"
    >
      <el-form ref="addMemberFormRef" label-width="100px" hide-required-asterisk>
         <div class="member-list-container" v-if="freeArr.length > 0">
          <div v-for="(group, index) in freeMembersGrouped" :key="index" class="member-group">
            <el-checkbox-group v-model="selectedMembers" class="checkbox-group">
              <el-checkbox
                v-for="member in group"
                :key="member.userId"
                :value="member.userId"
                style="margin-right: 10px"
              >
                {{ member.userName }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <!-- 条件渲染：如果 freeArr 为空，显示提示信息 -->
        <div v-else class="no-free-member">没有空闲成员</div>
      </el-form>
      <template #footer>
        <el-button @click="addMemberDialogVisible = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleAddMemberConfirm" class="confirm">确认</el-button>
      </template>
    </el-dialog>
    <!-- 修改子项目模态框 -->
    <el-dialog v-model="dialogVisible1" title="修改子项目" width="400px" :show-close="false">
      <el-form
        :model="formData"
        :rules="rules"
        ref="formRef"
        label-width="100px"
        hide-required-asterisk
      >
        <el-row>
          <el-form-item label="子项目名称" prop="projectName">
            <el-input v-model="formData.projectName" placeholder="请输入项目名称" />
          </el-form-item>
          <el-form-item label="负责人" prop="leaderId">
            <el-select
              v-model="formData.leaderId"
              placeholder="请选择负责人"
              @change="leaderChange"
            >
              <el-option
                v-for="(member, index) in groupMembersArr"
                :key="index"
                :label="member.userName"
                :value="member.userId"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="开始时间" prop="beginTime">
            <el-date-picker
              v-model="formData.beginTime"
              type="date"
              placeholder="请选择开始时间"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              v-model="formData.endTime"
              type="date"
              placeholder="请选择结束时间"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="项目工期" prop="taskDay">
            <el-input v-model="formData.taskDay" placeholder="请输入项目工期" />
          </el-form-item>
          <el-form-item label="项目比重" prop="proportion">
            <el-input
              v-model="formData.proportion"
              style="width: 200px"
              placeholder="请输入项目比重"
            >
              <template #suffix>%</template>
            </el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible1 = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm1" class="confirm">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import {
  getProjectDetails,
  getProjectMember,
  addProject,
  getFreeMember,
  addProjectMember,
  getProjectTask,
  updateProject,
  deleteProject
} from '../api/ProjectDetails'

import dayjs from 'dayjs' // 引入 dayjs 库用于日期计算

//分页
const currentPage = ref(1) // 当前页码
const pageSize = ref(3) // 每页显示的条数
const total = ref(0) // 总条数

//获取项目id
const router = useRoute()
const projectId = Number(router.query.projectId)
//父项目负责人
const parentLeaderId =  Number(router.query.leaderId)

//添加项目的开始时间
const beginTime = router.query.beginTime
//添加项目的结束时间
const endTime = router.query.endTime

//本地数据
const User = JSON.parse(localStorage.getItem('user'))

// 表格数据
const tableData = ref([])

//项目组成员
const groupMembersArr = ref([])

//所有空闲成员
const allMembers = ref([])

//除本项目外的空闲成员
const freeArr = ref([])


//获取项目成员
function fetchMember() {
  let data = {
    projectId: projectId,
  }
  getProjectMember('groupList', data).then((res) => {
    if (res.code === 200) {
      groupMembersArr.value = res.dataset
    }
  })
}

//获取所有空闲成员
function fetchAllFreeMember() {
  let data = {}
  getFreeMember('freeUsers', data).then((res) => {
    if (res.code === 200) {
      allMembers.value = res.dataset
    }
  })
}

//上来就请求
onMounted(() => {
  document.querySelector('.projectone').classList.add('projectoneafter')
  fetchData()
  fetchMember()
  fetchAllFreeMember()
})

// 处理当前页变化
const handleCurrentPageChange = (value) => {
  currentPage.value = value
  fetchData()
}

// 对成员数据进行分组，每组三个成员
const groupMembers = computed(() => {
  const groups = []
  for (let i = 0; i < groupMembersArr.value.length; i += 4) {
    groups.push(groupMembersArr.value.slice(i, i + 4))
  }
  return groups
})

// 添加子项目模态框
// 新增：模态框显示状态
const dialogVisible = ref(false)
// 新增：表单数据
const formData = ref({
  projectName: '',
  leaderId: '',
  leader: '',
  taskDay: '',
  beginTime: '',
  endTime: '',
  proportion: '',
  parentProjectId: projectId,
})
// 新增：表单引用
const formRef = ref(null)

//项目剩余比重
const allProportion = ref(0)

//计算修改项目比重
function calculateAllProportion1(num) {
  //遍历表格数据
  let sum = 0; // 初始化总和为0
  tableData.value.forEach(item => {
    sum += parseFloat(item.proportion); // 将每个项目的比重转换为数字并累加到总和中
  });
  allProportion.value = 100 - sum + num; // 计算剩余比重
}


// 计算项目剩余比重
function calculateAllProportion() {
    //遍历表格数据
    let sum = 0; // 初始化总和为0
    tableData.value.forEach(item => {
      sum += parseFloat(item.proportion); // 将每个项目的比重转换为数字并累加到总和中
    });
    allProportion.value = 100 - sum; // 计算剩余比重
}


//任务比重不能大于剩余比重
const validateProportion = (rule, value, callback) => {
  if (Number(value) > allProportion.value) {
    callback(new Error(`子项目比重不能大于剩余比重 ${allProportion.value}%`))
  } else {
    callback()
  }
}
//开始时间必须在结束时间之前
const validateBeginTime = (rule, value, callback) => {
  if (formData.value.endTime && value) {
    const endTime = dayjs(formData.value.endTime)
    const beginTime = dayjs(value)
    if (endTime.isBefore(beginTime)) {
      callback(new Error('开始时间必须在结束时间之前'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

// 结束时间必须在开始时间之后
const validateEndTime = (rule, value, callback) => {
  if (formData.value.beginTime && value) {
    const beginTime = dayjs(formData.value.beginTime)
    const endTime = dayjs(value)
    if (endTime.isBefore(beginTime)) {
      callback(new Error('结束时间必须在开始时间之后'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}
// 计算工期
const calculateTaskDay = () => {
  if (formData.value.beginTime && formData.value.endTime) {
    const beginTime = dayjs(formData.value.beginTime)
    const endTime = dayjs(formData.value.endTime)
    const days = endTime.diff(beginTime, 'day')
    formData.value.taskDay = days
  }
}

// 计算结束时间
const calculateEndTime = () => {
  if (formData.value.beginTime && formData.value.taskDay) {
    const beginTime = dayjs(formData.value.beginTime)
    const endTime = beginTime.add(parseInt(formData.value.taskDay), 'day')
    formData.value.endTime = endTime.format('YYYY-MM-DD')
  }
}

// 计算开始时间
const calculateBeginTime = () => {
  if (formData.value.endTime && formData.value.taskDay) {
    const endTime = dayjs(formData.value.endTime)
    const beginTime = endTime.subtract(parseInt(formData.value.taskDay), 'day')
    formData.value.beginTime = beginTime.format('YYYY-MM-DD')
  }
}
// 新增：表单验证规则
const rules = ref({
  projectName: [
    { required: true, message: '请输入项目名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
  ],
  leaderId: [{ required: true, message: '请选择负责人', trigger: 'change' }],
  beginTime: [
    { required: true, message: '请选择开始时间', trigger: 'change' },
    { validator: validateBeginTime, trigger: 'change' },
    { 
      validator: (rule, value, callback) => {
        const parentStart = dayjs(beginTime);
        const parentEnd = dayjs(endTime);
        const current = dayjs(value);
        
        if (current.isBefore(parentStart)) {
          callback(new Error(`开始时间不能早于父项目开始时间`));
        } else if (current.isAfter(parentEnd)) {
          callback(new Error(`开始时间不能晚于父项目结束时间`));
        } else {
          callback();
        }
      },
      trigger: 'change'
    },
    { validator: (rule, value, callback) => {
        if (value && formData.value.endTime) {
          calculateTaskDay()
        } else if (value && formData.value.taskDay) {
          calculateEndTime()
        }
        callback()
      }, trigger: 'change' }
  ],
    endTime: [
    { required: true, message: '请选择结束时间', trigger: 'change' },
    { validator: validateEndTime, trigger: 'change' },
    { 
      validator: (rule, value, callback) => {
        const parentStart = dayjs(beginTime);
        const parentEnd = dayjs(endTime);
        const current = dayjs(value);
        
        if (current.isBefore(parentStart)) {
          callback(new Error(`结束时间不能早于父项目开始时间`));
        } else if (current.isAfter(parentEnd)) {
          callback(new Error(`结束时间不能晚于父项目结束时间`));
        } else {
          callback();
        }
      },
      trigger: 'change'
    },
    { validator: (rule, value, callback) => {
        if (value && formData.value.beginTime) {
          calculateTaskDay()
        } else if (value && formData.value.taskDay) {
          calculateBeginTime()
        }
        callback()
      }, trigger: 'change' }
  ],
  taskDay: [
    { required: true, message: '请输入任务工期', trigger: 'blur' },
    { validator: (rule, value, callback) => {
        if (formData.value.beginTime && value) {
          calculateEndTime();
        } else if (formData.value.endTime && value) {
          calculateBeginTime();
        }
        callback();
      }, trigger: 'blur' }
  ],
  proportion: [
    { required: true, message: '请输入任务比重', trigger: 'blur' },
    { validator: validateProportion, trigger: 'blur' }
  ],
})

// 新增：点击添加子项目按钮方法
const handleAddSubProject = () => {
  if (formRef.value) {
    formData.value = {
      projectName: '',
      leaderId: '',
      leader: '',
      taskDay: '',
      beginTime: '',
      endTime: '',
      proportion: '',
    }
    formRef.value.resetFields()
   
  }
  calculateAllProportion() // 计算项目剩余比重
  dialogVisible.value = true
}

// 新增：负责人选择变化时触发的方法
const leaderChange = (value) => {
  formData.value.leader = groupMembersArr.value.find((member) => member.userId === value).userName
}

//添加子项目接口
function addProjectData() {
  let data = {
    projectName: formData.value.projectName,
    leaderId: formData.value.leaderId,
    taskDay: formData.value.taskDay,
    beginTime: formData.value.beginTime,
    endTime: formData.value.endTime,
    proportion: formData.value.proportion,
    parentProjectId: projectId,
    leader: formData.value.leader,
  }
  addProject('addChildProject', data).then((res) => {
    if (res.code === 200) {
      ElMessage.success('添加成功')
      fetchData()
      dialogVisible.value = false
    }
  })
}

// 新增：点击确认按钮方法
const handleConfirm = () => {
  // 提交表单逻辑
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('是否确认添加该子项目？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          addProjectData()
        })
        .catch(() => {
          ElMessage.info('已取消添加')
        })
    }
  })
}

// 过滤掉本项目成员，得到除本项目外的空闲成员
function filterNonProjectMembers() {
  const projectMemberIds = groupMembersArr.value.map((member) => member.userId)
  freeArr.value = allMembers.value.filter((member) => {
    return !projectMemberIds.includes(member.userId)
  })
}

// 将空闲成员按每行四个进行分组
const freeMembersGrouped = computed(() => {
  const groups = []
  for (let i = 0; i < freeArr.value.length; i += 6) {
    groups.push(freeArr.value.slice(i, i + 6))
  }
  return groups
})

// 添加项目成员模态框
const addMemberDialogVisible = ref(false)
const addMemberFormRef = ref(null)

// 选中的成员
const selectedMembers = ref([])

//点击添加项目成员按钮方法
const handleAddProjectMember = () => {
  filterNonProjectMembers()

  addMemberDialogVisible.value = true
}

// 添加项目成员接口
async function addProjectMemberData(userId) {
    let data = {
      projectId: projectId,
      userId,
    }  
     let res =await addProjectMember("addGroup", data)
     if(res.code === 200){
       return true;
     }else{
      ElMessage.error("添加项目成员失败")
      return false;
     }

}

//点击确认添加项目成员
const handleAddMemberConfirm = async () => {
  if (selectedMembers.value.length === 0) {
    ElMessage.warning('请选择要添加的项目成员')
    return 
  }
  try {
    await ElMessageBox.confirm('是否确认添加这些项目成员？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })

    const addPromises = selectedMembers.value.map(userId => addProjectMemberData(userId));
    const results = await Promise.all(addPromises);

   
    if (results.every(result => result)) {
      ElMessage.success('所有成员添加成功')
      addMemberDialogVisible.value = false 
      fetchMember() // 重新获取项目成员列表
    } else {
      ElMessage.error('部分成员添加失败')
    }
  } catch (error) {
    if (error === 'cancel') {
      ElMessage.info('已取消添加')
    } else {
      console.error('添加成员过程中出现错误', error)
      ElMessage.error('添加成员时发生错误，请稍后重试')
    }
  }
}

//跳转详情页面
const router1 = useRouter()
const handleDetails = (row) => {
  router1.push({ path: '/allTotal/SonProjectDetails', query: { projectId: row.projectId ,
    parentProjectId: projectId,parentLeaderId: parentLeaderId,SonleaderId: row.leaderId,
    parentStart:row.beginTime,parentEnd:row.endTime
  } })
}

//判断是否可以点击详情
const disabledMap = ref(new Map()) // 存储每个项目的禁用状态

// 在获取表格数据时预先计算禁用状态
async function fetchData() {
  let data = {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
    parentProjectId: projectId,
  }
  const res = await getProjectDetails('childProjectList', data)
  if (res.code === 200) {
    tableData.value = res.dataset.taskList
    total.value = res.dataset.pageCount * pageSize.value
    
    // 预计算每个项目的禁用状态
    const promises = tableData.value.map(async (row) => {
      const isDisabled = await calculateDisabled(row)
      //存储每个项目的禁用状态
      disabledMap.value.set(row.projectId, isDisabled)
    })
    await Promise.all(promises)
  }
}

// 单独封装的判断逻辑
async function calculateDisabled(row) {
  //子项目负责人id
  let sonLeaderId = ref()
  // 管理员始终不禁用
  if (User.roleId == '1' || User.roleId == '2') return false
  if(parentLeaderId == User.userId){
    return false;
  }
  sonLeaderId.value = row.leaderId
  const sonProjectId = row.projectId
  const userIdArr = []
  
  try {
    const res = await getProjectTask('taskList', {
      parentProjectId: sonProjectId,
      pageIndex: 1,
      pageSize: 1000
    })
    
    if (res.code === 200) {
      res.dataset.taskList.forEach(item => {
        userIdArr.push(item.leaderId)
      })
    }
    
    if(User.userId == sonLeaderId.value ){
      return false
    }
    if(userIdArr.includes(User.userId)){
      return false
    }
    return true
  } catch (error) {
    console.error('权限检查失败:', error)
    return true // 出错时默认禁用
  }
}

//修改项目
const dialogVisible1 = ref(false)
//点击修改按钮
const handleModity = (row) => {
  dialogVisible1.value = true
  formData.value = { ...row } // 复制对象，避免直接修改原始数据
  calculateAllProportion1(row.proportion) // 计算项目剩余比重
}
//修改项目接口
function updateProject1() {
  let data = {
    projectId: formData.value.projectId,
    projectName: formData.value.projectName,
    leaderId: formData.value.leaderId,
    taskDay: formData.value.taskDay,
    beginTime: formData.value.beginTime,
    endTime: formData.value.endTime,
    proportion: formData.value.proportion,
    leader: formData.value.leader,
  }
  updateProject('updateChildProject', data).then((res) => {
    if (res.code === 200) {
      ElMessage.success('修改成功')
      fetchData()
      dialogVisible1.value = false
    }else{
      ElMessage.error('修改失败')
    }
  })
}
//点击确认修改
const handleConfirm1 = () => {
  // 提交表单逻辑
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('是否确认修改该项目？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        updateProject1()
      }).catch(() => {
        ElMessage.info('已取消修改')
      })
    }
  })
}

//删除子项目接口
function deleteProject1(row) {
  let data = {
    projectId: row.projectId,
  }
  deleteProject('deleteChildProject', data).then((res) => {
    if (res.code === 200) {
      ElMessage.success('删除成功')
      fetchData()
      dialogVisible1.value = false
    }
  })
}

//点击删除
const handleDel = (row) => {
  ElMessageBox.confirm('是否确认删除该项目？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteProject1(row)
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}



function getback() {
  window.history.go(-1)
}

function handleChange(){
  currentPage.value = 1; // 重置页码为1
  fetchData()
}

</script>
  
  <style scoped>
  .addmsg1 {
  width: 25px;
  height: 25px;
  margin-right: 20px;
  cursor: pointer;
}
.class {
  width: 90%;
  height: 10%;
  margin-bottom: 20px;
  margin-top: 20px;
}
/* 头部左侧 */
.header-left {
  display: flex;
  align-items: center;
  margin-left: 40px;
}
.line {
  width: 2px;
  height: 20px;
  background-color: #007bff;
}
.title {
  padding-left: 10px;
  font-size: 20px;
  margin-right: 20px;
}
.className {
  margin-right: 10px;
}
.line2 {
  width: 10px;
  height: 2px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #9b9b9b;
}
.search {
  background-color: #0f6ab1;
  color: #fff;
  border: none;
  margin-left: 10px;
  border-radius: 0px;
  padding: 0;
  padding-right: 15px;
  padding-left: 36px;
}
.searchImg {
  position: absolute;
  top: 8px;
  left: 25px;
}
/* 头部右侧 */
.header-right {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
.addmsg {
  width: 25px;
  height: 25px;
}

/* 项目组成员 */
.member {
  min-width: 1000px;
  display: flex;
  background-color: #fff;
  width: 90%;
  flex-direction: column;
  margin-bottom: 20px;
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
}
.member-title {
  /* width: 100%; */
  display: flex;
  align-items: center;
  margin-left: 40px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.people {
  width: 100%;
  padding-left: 40px;
  padding-top: 10px;
  box-sizing: border-box;
}

.member-row {
  /* display: flex;
  justify-content: space-around; */
  width: 100%;
  margin-bottom: 5px;
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(4, 1fr); /* 每行显示5个列 */
}

.member-item {
  width: 90%;
  display: flex;
  justify-content: space-around;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-radius: 19px;
}
.member-item:hover {
  background-color: #f5f5f5;
  border-color: #007bff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* .member-item span {
  display: block;
  margin-right: 10px;
}
.member-item span:last-child {
  margin-right: 0; 
} */

/* 表格区域 */
.class-content {
  width: 90%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 表格数据 */
:deep(.el-table thead th) {
  background-color: #fbfcff !important;
}
:deep(.el-table .cell) {
  color: black;
}
:deep(.details1) {
  margin-left: 55px;
}
/* 分页 */
.page {
  margin-top: 50px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}
/* 分页背景色 */
:deep(.el-pager .is-active) {
  background-color: #0f6ab1 !important;
}

/* 模态框 */
:deep(.el-overlay .el-overlay-dialog) {
  position: absolute;
}
:deep(.el-overlay) {
  position: absolute;
}
:deep(.el-dialog) {
  padding: 0px;
  width: 800px;
}
:deep(.el-dialog header span) {
  display: inline-block;
  width: 100%;
  background-color: #0f6ab1;
  height: 40px;
  color: white;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
}
:deep(.el-dialog__body) {
  display: flex;
  justify-content: center;
}
:deep(.el-select) {
  width: 200px;
}
:deep(.el-dialog__footer) {
  text-align: center;
  padding-bottom: 20px;
}
:deep(.confirm) {
  margin-left: 50px;
  background-color: #0f6ab1;
}
:deep(.cancel) {
  background-color: #0f6ab1;
  color: white;
}

/* 成员 */
.member-group {
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 10px;
}

.checkbox-group {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(6, 1fr); /* 每行显示四个列 */
}


.no-free-member {
  text-align: center;
  color: #666;
  padding: 20px;
}

.member-list-container {
  max-height: 100px; 
  overflow-y: auto; 
}
</style>